<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Git 钩子完全指南 | 技术小馆</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <style>
        :root {
            --primary: #3b82f6;
            --primary-dark: #2563eb;
            --secondary: #10b981;
            --dark: #1e293b;
            --light: #f8fafc;
            --gray: #64748b;
        }
        body {
            font-family: 'Noto Sans SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            color: var(--dark);
            line-height: 1.6;
            background-color: #f8fafc;
        }
        h1, h2, h3, h4 {
            font-family: 'Noto Serif SC', serif;
            font-weight: 600;
        }
        .hero {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        }
        .card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        }
        .hook-card {
            border-left: 4px solid var(--primary);
        }
        .hook-card:hover {
            border-left-color: var(--secondary);
        }
        .dropdown:hover .dropdown-menu {
            display: block;
        }
        .mermaid {
            background-color: white;
            padding: 1.5rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        }
    </style>
</head>
<body class="min-h-screen flex flex-col">
    <!-- Header -->
    <header class="sticky top-0 z-50 bg-white shadow-md">
        <div class="container mx-auto px-6 py-4">
            <div class="flex items-center justify-between">
                <div class="flex items-center">
                    <i class="fas fa-code-branch text-2xl text-blue-500 mr-2"></i>
                    <h1 class="text-xl font-bold text-gray-800">技术小馆</h1>
                </div>
                <nav class="hidden md:flex items-center space-x-8">
                    <a href="#" class="text-gray-600 hover:text-blue-500 transition">首页</a>
                    <a href="#" class="text-gray-600 hover:text-blue-500 transition">Git教程</a>
                    <a href="#" class="text-gray-600 hover:text-blue-500 transition">开发工具</a>
                    <a href="#" class="text-gray-600 hover:text-blue-500 transition">关于我们</a>
                </nav>
                <div class="md:hidden">
                    <button class="text-gray-600 focus:outline-none">
                        <i class="fas fa-bars text-xl"></i>
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- Hero Section -->
    <section class="hero text-white py-20">
        <div class="container mx-auto px-6">
            <div class="max-w-3xl mx-auto text-center">
                <h1 class="text-4xl md:text-5xl font-bold mb-6">Git 钩子完全指南</h1>
                <p class="text-xl md:text-2xl mb-8">自动化你的开发工作流，提升代码质量与团队协作效率</p>
                <div class="flex justify-center space-x-4">
                    <a href="#hooks" class="bg-white text-blue-600 px-6 py-3 rounded-lg font-medium hover:bg-gray-100 transition duration-300">
                        <i class="fas fa-book-open mr-2"></i>学习钩子
                    </a>
                    <a href="#visualization" class="bg-blue-700 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-800 transition duration-300">
                        <i class="fas fa-project-diagram mr-2"></i>可视化指南
                    </a>
                </div>
            </div>
        </div>
    </section>

    <!-- Main Content -->
    <main class="flex-grow container mx-auto px-6 py-12">
        <div class="max-w-4xl mx-auto">
            <!-- Intro Section -->
            <section class="mb-16">
                <div class="bg-white rounded-xl p-8 shadow-lg">
                    <h2 class="text-3xl font-bold mb-6 text-gray-800 border-b pb-4">Git 钩子简介</h2>
                    <p class="text-gray-700 mb-6 text-lg leading-relaxed">
                        在 Git 中，"钩子"（hooks）是一种强大的自动化机制，允许在 Git 执行特定操作时自动运行自定义脚本。这些钩子脚本可以用来执行各种自动化任务，如代码检查、自动测试、构建过程、通知等，从而提升开发效率和代码质量。
                    </p>
                    <div class="bg-blue-50 border-l-4 border-blue-500 p-4 rounded">
                        <div class="flex">
                            <div class="flex-shrink-0">
                                <i class="fas fa-lightbulb text-yellow-500 text-2xl mt-1"></i>
                            </div>
                            <div class="ml-3">
                                <h3 class="text-sm font-medium text-blue-800">专业提示</h3>
                                <div class="mt-2 text-sm text-blue-700">
                                    <p>Git 钩子是实现持续集成/持续部署(CI/CD)流程的重要工具，合理使用可以大幅减少人为错误。</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Basic Concepts -->
            <section class="mb-16" id="basic-concepts">
                <div class="bg-white rounded-xl p-8 shadow-lg">
                    <h2 class="text-3xl font-bold mb-6 text-gray-800 border-b pb-4">Git 钩子的基本概念</h2>
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <div class="flex items-center mb-4">
                                <div class="bg-blue-100 p-3 rounded-full mr-4">
                                    <i class="fas fa-file-code text-blue-500 text-xl"></i>
                                </div>
                                <h3 class="text-xl font-semibold text-gray-800">脚本文件</h3>
                            </div>
                            <p class="text-gray-700">
                                钩子是一些可执行的脚本，这些脚本会在 Git 操作的特定时刻被触发。Git 钩子通常位于 Git 仓库的 <code class="bg-gray-200 px-2 py-1 rounded">.git/hooks</code> 目录下。
                            </p>
                        </div>
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <div class="flex items-center mb-4">
                                <div class="bg-green-100 p-3 rounded-full mr-4">
                                    <i class="fas fa-code text-green-500 text-xl"></i>
                                </div>
                                <h3 class="text-xl font-semibold text-gray-800">语言灵活</h3>
                            </div>
                            <p class="text-gray-700">
                                每个钩子都是一个独立的脚本文件，可以使用任何脚本语言编写，如 Bash、Python、Perl 等。只需要确保脚本可执行并且第一行包含正确的解释器路径。
                            </p>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Common Hooks -->
            <section class="mb-16" id="hooks">
                <div class="bg-white rounded-xl p-8 shadow-lg">
                    <h2 class="text-3xl font-bold mb-6 text-gray-800 border-b pb-4">常见的 Git 钩子及其作用</h2>
                    <p class="text-gray-700 mb-8">以下是一些最常用的 Git 钩子及其典型应用场景：</p>
                    
                    <div class="space-y-6">
                        <!-- Pre-Commit -->
                        <div class="hook-card bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
                            <div class="flex items-start">
                                <div class="bg-blue-100 p-3 rounded-lg mr-4">
                                    <i class="fas fa-check-circle text-blue-500 text-2xl"></i>
                                </div>
                                <div>
                                    <h3 class="text-xl font-semibold text-gray-800 mb-2">pre-commit</h3>
                                    <p class="text-gray-700 mb-3">在提交操作开始之前执行。通常用于代码检查、自动格式化、运行测试等。</p>
                                    <div class="bg-gray-100 p-3 rounded">
                                        <p class="text-sm text-gray-700 font-medium">使用场景: 确保提交的代码符合规范，防止不符合标准的代码被提交到版本库。</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Commit-Msg -->
                        <div class="hook-card bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
                            <div class="flex items-start">
                                <div class="bg-purple-100 p-3 rounded-lg mr-4">
                                    <i class="fas fa-comment-dots text-purple-500 text-2xl"></i>
                                </div>
                                <div>
                                    <h3 class="text-xl font-semibold text-gray-800 mb-2">commit-msg</h3>
                                    <p class="text-gray-700 mb-3">在提交信息编辑完成后，但在提交完成之前执行。用于验证提交消息的格式。</p>
                                    <div class="bg-gray-100 p-3 rounded">
                                        <p class="text-sm text-gray-700 font-medium">使用场景: 强制执行提交消息的格式规范，比如确保提交消息符合特定的风格或规则。</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Post-Commit -->
                        <div class="hook-card bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
                            <div class="flex items-start">
                                <div class="bg-green-100 p-3 rounded-lg mr-4">
                                    <i class="fas fa-paper-plane text-green-500 text-2xl"></i>
                                </div>
                                <div>
                                    <h3 class="text-xl font-semibold text-gray-800 mb-2">post-commit</h3>
                                    <p class="text-gray-700 mb-3">在提交操作完成之后执行。通常用于执行一些后处理任务，如通知系统、触发 CI/CD 流水线等。</p>
                                    <div class="bg-gray-100 p-3 rounded">
                                        <p class="text-sm text-gray-700 font-medium">使用场景: 提交完成后自动触发其他任务，如发布通知或更新文档。</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Pre-Push -->
                        <div class="hook-card bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
                            <div class="flex items-start">
                                <div class="bg-yellow-100 p-3 rounded-lg mr-4">
                                    <i class="fas fa-upload text-yellow-500 text-2xl"></i>
                                </div>
                                <div>
                                    <h3 class="text-xl font-semibold text-gray-800 mb-2">pre-push</h3>
                                    <p class="text-gray-700 mb-3">在推送操作开始之前执行。通常用于检查推送的内容是否符合规范，防止不合格的代码被推送到远程仓库。</p>
                                    <div class="bg-gray-100 p-3 rounded">
                                        <p class="text-sm text-gray-700 font-medium">使用场景: 在推送代码到远程仓库之前运行一些验证步骤，如运行测试、代码检查等。</p>
                                    </div>
                                </div>
                            </div>
                        </div>

                        <!-- Post-Receive -->
                        <div class="hook-card bg-white p-6 rounded-lg shadow-sm hover:shadow-md transition">
                            <div class="flex items-start">
                                <div class="bg-red-100 p-3 rounded-lg mr-4">
                                    <i class="fas fa-server text-red-500 text-2xl"></i>
                                </div>
                                <div>
                                    <h3 class="text-xl font-semibold text-gray-800 mb-2">post-receive</h3>
                                    <p class="text-gray-700 mb-3">在服务器端接收到推送并完成后执行。用于在服务器端执行一些操作，如部署代码、更新网站等。</p>
                                    <div class="bg-gray-100 p-3 rounded">
                                        <p class="text-sm text-gray-700 font-medium">使用场景: 在服务器上接收到新的提交后，自动部署或执行一些自动化任务。</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Visualization -->
            <section class="mb-16" id="visualization">
                <div class="bg-white rounded-xl p-8 shadow-lg">
                    <h2 class="text-3xl font-bold mb-6 text-gray-800 border-b pb-4">Git 钩子工作流程可视化</h2>
                    <p class="text-gray-700 mb-8">以下图表展示了不同 Git 钩子在开发工作流中的触发时机：</p>
                    
                    <div class="mermaid">
                        gitGraph
                            commit
                            branch feature
                            checkout feature
                            commit id: "pre-commit: 代码检查"
                            commit id: "commit-msg: 验证提交信息" type: HIGHLIGHT
                            commit id: "post-commit: 触发CI/CD"
                            checkout main
                            merge feature
                            commit id: "pre-push: 验证推送内容"
                            push
                            commit id: "pre-receive/post-receive: 服务器端验证和部署" type: REVERSE
                    </div>
                </div>
            </section>

            <!-- Notes -->
            <section class="mb-16">
                <div class="bg-white rounded-xl p-8 shadow-lg">
                    <h2 class="text-3xl font-bold mb-6 text-gray-800 border-b pb-4">使用 Git 钩子的注意事项</h2>
                    <div class="space-y-6">
                        <div class="flex items-start">
                            <div class="bg-yellow-100 p-2 rounded-full mr-4 mt-1">
                                <i class="fas fa-exclamation-circle text-yellow-500"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold text-gray-800 mb-2">可执行权限</h3>
                                <p class="text-gray-700">确保钩子脚本具有可执行权限。在 Linux 和 macOS 上，可以使用 <code class="bg-gray-200 px-2 py-1 rounded">chmod +x &lt;hook-file&gt;</code> 命令设置可执行权限。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-blue-100 p-2 rounded-full mr-4 mt-1">
                                <i class="fas fa-code-branch text-blue-500"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold text-gray-800 mb-2">版本控制</h3>
                                <p class="text-gray-700">Git 钩子脚本不会被版本控制系统（如 Git）管理，因此需要在每个开发环境中手动配置。如果需要在团队中共享钩子，可以将钩子脚本放在版本控制下，并在 <code class="bg-gray-200 px-2 py-1 rounded">.git/hooks</code> 目录下使用符号链接（symlink）来指向版本库中的钩子脚本。</p>
                            </div>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-red-100 p-2 rounded-full mr-4 mt-1">
                                <i class="fas fa-laptop-code text-red-500"></i>
                            </div>
                            <div>
                                <h3 class="text-xl font-semibold text-gray-800 mb-2">兼容性</h3>
                                <p class="text-gray-700">由于钩子脚本在不同操作系统上可能有不同的行为，需要确保脚本在目标环境中能够正常执行，特别是在跨平台开发团队中。</p>
                            </div>
                        </div>
                    </div>
                </div>
            </section>

            <!-- Best Practices -->
            <section class="mb-16">
                <div class="bg-white rounded-xl p-8 shadow-lg">
                    <h2 class="text-3xl font-bold mb-6 text-gray-800 border-b pb-4">Git 钩子最佳实践</h2>
                    <div class="grid md:grid-cols-2 gap-6">
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <div class="flex items-center mb-4">
                                <div class="bg-purple-100 p-3 rounded-full mr-4">
                                    <i class="fas fa-tools text-purple-500 text-xl"></i>
                                </div>
                                <h3 class="text-xl font-semibold text-gray-800">使用预提交框架</h3>
                            </div>
                            <p class="text-gray-700 mb-4">
                                考虑使用像 <code class="bg-gray-200 px-2 py-1 rounded">pre-commit</code> 这样的框架来管理你的 Git 钩子。它提供了一种简单的方法来安装和管理多个预提交钩子。
                            </p>
                            <div class="bg-gray-100 p-3 rounded">
                                <pre class="text-sm text-gray-800 overflow-x-auto"><code># 安装pre-commit
pip install pre-commit

# 创建.pre-commit-config.yaml文件
pre-commit install</code></pre>
                            </div>
                        </div>
                        <div class="bg-gray-50 p-6 rounded-lg">
                            <div class="flex items-center mb-4">
                                <div class="bg-green-100 p-3 rounded-full mr-4">
                                    <i class="fas fa-lightbulb text-green-500 text-xl"></i>
                                </div>
                                <h3 class="text-xl font-semibold text-gray-800">保持钩子轻量级</h3>
                            </div>
                            <p class="text-gray-700 mb-4">
                                钩子脚本应该快速执行，避免执行耗时的操作。如果需要进行大量处理，考虑将其放入 CI/CD 流水线中。
                            </p>
                            <ul class="text-gray-700 space-y-2">
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span>简单的代码格式检查</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span>基本的语法验证</span>
                                </li>
                                <li class="flex items-start">
                                    <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
                                    <span>快速运行的单元测试</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>

    <!-- Footer -->
    <footer class="bg-gray-900 text-gray-300 py-8">
        <div class="container mx-auto px-6">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <h3 class="text-xl font-bold text-white mb-2">技术小馆</h3>
                    <p class="text-gray-400">专业的开发者知识共享平台</p>
                </div>
                <div>
                    <a href="http://www.yuque.com/jtostring" class="text-gray-400 hover:text-white transition duration-300">
                        <i class="fas fa-external-link-alt mr-2"></i>访问官网
                    </a>
                </div>
            </div>
            <div class="border-t border-gray-800 mt-8 pt-8 text-center text-gray-500 text-sm">
                <p>© 2023 技术小馆. 保留所有权利.</p>
            </div>
        </div>
    </footer>

    <script>
        // Initialize Mermaid
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: false,
                htmlLabels: true,
                curve: 'basis'
            },
            gitGraph: {
                mainBranchName: 'main',
                showCommitLabel: true,
                rotateCommitLabel: false
            }
        });
        
        // Smooth scrolling for anchor links
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>